<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    text-color="black"
    active-text-color="#d43c33"
    background-color="#fff"
  >
    <el-menu-item>
      <span class="top-text logobox">
        <img src="../../../assets/logo.jpg" alt />
      </span>
    </el-menu-item>
    <el-menu-item index="1">
      <router-link class="router-text" to="/home">
        <span class="top-text">首页</span>
      </router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link class="router-text" to="/toastmaster">
        <span class="top-text">| 主持人</span>
      </router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <router-link class="router-text" to="/joinus"> <!--:to="to" -->
        <span class="top-text">| 加入我们</span>
      </router-link>
    </el-menu-item>
    <el-menu-item index="4">
      <router-link class="router-text" to="/about">
        <span class="top-text">| 关于我们</span>
      </router-link>
    </el-menu-item>
  </el-menu>
</template>
<script>
import { mapState, mapMutations } from "vuex";

export default {
    name: "Nav",
    data() {
        return {
            activeIndex: "1",
            to: "",
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            //导航高亮定位
            console.log(key, keyPath);
            localStorage.setItem('currentIndex',key);
        }
    },
  
};
</script>
<style scoped>
.el-menu-demo {
  padding: 0 200px;
  font-weight: bolder;
}
.el-menu-demo span {
  font-size: 0.2rem;
}
.el-menu-item {
  padding: 0 60px;
}
.router-text {
  display: block;
  width: 100%;
  height: 100%;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}
.top-text img {
  width: 170px;
  height: 60px;
  margin-top: 15px;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: 0;
  height: 90px;
  line-height: 90px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0;
}
</style>